<script>
import request from '@/utils/request'

export default {
  data(){
    return{
      yue:11,
      shengyu:22,
      chuli:33,
      huoli:1000,
      zz:100,
      max:"重庆科技大学",
      profit:1000,
      khxf1:"重庆科技大学",
      khxf1f:100,
      khxf2:"重庆科技大学",
      khxf2f:100,
      khxf3:"重庆科技大学",
      khxf3f:100,
      tableData: [{
        paixu:'1',
        kehu: '重庆科技大学',
        chatoken: 10000,
        chazi:10000
      }, {
        paixu:'1',
        kehu: '重庆科技大学',
        chatoken: 10000,
        chazi:10000
      }, {
        paixu:'1',
        kehu: '重庆科技大学',
        chatoken: 10000,
        chazi:10000
      }, {
        paixu:'1',
        kehu: '重庆科技大学',
        chatoken: 10000,
        chazi:10000
      }, {
        paixu:'1',
        kehu: '重庆科技大学',
        chatoken: 10000,
        chazi:10000
      }]
    }
  },
  mounted() {
    request.get('/yydindex').then((res)=>{
      this.yue = res.data.yue
      this.shengyu = res.data.shengyu
      this.chuli = res.data.chuli
    })
    request.post('/yydsou').then((res)=>{
      this.huoli = res.data.huoli
      this.profit = res.data.profit
      this.max = res.data.max
      this.zz = res.data.zz
      this.khxf1 = res.data.khxf1
      this.khxf1f = res.data.khxf1f
      this.khxf2 = res.data.khxf2
      this.khxf2f = res.data.khxf2f
      this.khxf3 = res.data.khxf3
      this.khxf3f = res.data.khxf3f
    })
  }
}
</script>

<template>
  <div id="box" style="width: 100% ">
    <el-card style="margin: 0.5vw; width: 100%" >
     <div style="display: flex  ; justify-content: space-around; width: 100%">
       <div style="; display: flex ; flex-direction: column">
         <div style=" color: #787676 ; margin-bottom: 1vw;">账户余额</div>
         <div style="font-size: 2vw ; display: flex;align-items: center " >
           <div><img src="@/assets/img/icon(2).png" alt="" style="margin-right: 1vw"></div>
           <div style="font-weight: bold">{{ yue }}</div>
         </div>
       </div>
       <div style="display: flex; flex-direction: column">
         <div style=" color: #787676  ;margin-bottom: 1vw;">剩余token</div>
         <div style="font-size: 2vw; display: flex;align-items: center ">
          <div> <img src="@/assets/img/iconh.png" alt="" style="margin-right: 1vw"></div>
           <div style="font-weight: bold">{{ shengyu }}</div>
         </div>
       </div>
       <div style="display: flex; flex-direction: column">
         <div style=" color: #787676  ;margin-bottom:1vw ;">未处理新增知识库</div >
         <div style="font-size: 2vw; display: flex;align-items: center">
           <div><img src="@/assets/img/iconh.png" alt="" style="margin-right: 1vw"></div>
          <div style="font-weight: bold"> {{ chuli }}</div>
         </div></div>
       <el-row style="margin-top: 1vw ;"><el-button type="info" style="width: 12vw; height: 2.5vw; font-size: 1.2vw">充值</el-button></el-row>
     </div>
    </el-card>

    <div style="margin-top:0.5vw;margin-left: 3vw; font-weight: bold;font-size: 1.5vw">收入分析：</div>

    <div>
      <el-card style="width: 100%; margin: 0.5vw">
        <div style="display: flex; justify-content:space-around">
          <div style=";border: 0.1vw solid #e6e3e3 ;flex-direction: column; border-radius: 1vw;  ">
            <div style="font-size:1vw; color: #787676; width: 17vw;margin-bottom: 1vw">今日获利</div>
            <div style="font-weight: bold;display: flex;align-items: center">
             <div> <img src="@/assets/img/icon(3).png" alt="" style="margin-right: 1vw;font-size: 1.2vw"></div>
              <div style="font-weight: bold">{{ huoli }}</div>
            </div>
          </div>
          <div style=";border: 0.1vw solid #e6e3e3 ; flex-direction: column; border-radius: 1vw">
            <div  style="font-size:1vw; color: #787676; width: 17vw;margin-bottom: 1vw">增长</div>
            <div style="font-weight: bold;display: flex;align-items: center">
              <div ><img src="@/assets/img/icon(3).png" alt="" style="margin-right: 1vw; font-size: 1.2vw"> </div>
              <div style="font-weight: bold">{{ zz }}</div>
            </div>
          </div>
          <div style=" ;border: 0.1vw solid #e6e3e3 ; flex-direction: column; border-radius: 1vw">
            <div style="font-size:1vw; color: #787676; width: 17vw; margin-bottom: 1vw">消费最多客户</div>
            <div style="font-weight: bold;display: flex; ">
              <div><img src="@/assets/img/icon(5).png" alt="" style=" font-size: 1.2vw"></div>
             <div style="padding: 0.1vw 1vw ;font-weight: bold"> {{ max }}</div>
            </div>
          </div>
          <div style="border: 0.1vw solid #e6e3e3 ;flex-direction: column; border-radius: 1vw">
            <div style="font-size:1vw; color: #787676;width: 17vw;margin-bottom: 1vw ">总盈利</div>
            <div style="font-weight: bold;display: flex;">
              <div><img src="@/assets/img/icon(5).png" alt="" style="font-size: 1.2vw"></div>
              <div style="padding: 0.1vw 1vw;font-weight: bold">{{ profit }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div style="margin-top: 0.5vw;margin-left: 3vw; font-weight: bold; font-size: 1.5vw">今日数据:</div>

    <div style="margin: 0.5vw;display: flex; justify-content:space-between;">
      <div>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="paixu"
            label="排序"
            width="60%">
          </el-table-column>
          <el-table-column
            prop="kehu"
            label="客户"
            width="150%">
          </el-table-column>
          <el-table-column
            prop="chatoken"
            label="今日查询token"
            width="150%">
          </el-table-column>
          <el-table-column
            prop="chazi"
            label="今日查询字数"
          width="200%">
          </el-table-column>
        </el-table>
        <el-card style="text-align: center;color: blue"><a href="#">加载更多</a></el-card>
      </div>

      <div >
        <el-card >
          <div style="display: flex; justify-content:space-between; ">
            <div style="font-weight: bold; font-size: 1vw;padding-right: 13vw ">客户消费</div>
            <div style="color: blue; margin-right: 2vw; padding-left: 15vw">{{ zhongb }}</div></div>
        </el-card>
        <el-card >
          <el-card style="margin: 0.8vw 0 0 0">
            <div style="display: flex;justify-content:space-between">
              <div><img src="@/assets/img/编组备份.png" alt="">{{ khxf1 }}</div>
              <div >{{ khxf1f }}</div>
            </div>
          </el-card>
          <el-card >
            <div style="display: flex;justify-content:space-between">
              <div><img src="@/assets/img/编组备份.png" alt="">{{ khxf2 }}</div>
              <div>{{ khxf2f }}</div>
            </div>
          </el-card>
          <el-card>
            <div style="display: flex;justify-content:space-between">
              <div><img src="@/assets/img/编组备份.png" alt="">{{ khxf2 }}</div>
              <div>{{ khxf2f }}</div>
            </div>
          </el-card>
          <el-card style="text-align: center;color: blue;"><a href="#">加载更多</a></el-card>
        </el-card>
      </div>
    </div>
    </div>
</template>

<style scoped lang="scss">

*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 1vw;
  letter-spacing: 0.2vw;
}
html,body{
  width: 100%;
  height: 100%;
}
#box{
  width: 100%;
}
#box>div{
  width: 100%;
}
</style>
